<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D旋转标签云 Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f0f2f5;
            perspective: 800px; /* 定义3D透视距离 */
        }

        .tag-cloud {
            position: relative;
            width: 80%;
            height: 600px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            transform-style: preserve-3d; /* 启用3D空间 */
        }

        .tag {
            position: absolute;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 500;
            color: #333;
            background: #fff;
            border-radius: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            /* 基础动画 */
            animation: rotate-3d 8s linear infinite;
            transition: all 0.3s ease;
        }

        /* 3D旋转动画 */
        @keyframes rotate-3d {
            0% {
                transform: rotateY(0deg) rotateX(30deg) scale(1);
            }
            50% {
                transform: rotateY(180deg) rotateX(-30deg) scale(1.1); /* 中间缩放效果 */
            }
            100% {
                transform: rotateY(360deg) rotateX(30deg) scale(1);
            }
        }

        /* 鼠标悬停效果 */
        .tag:hover {
            animation-play-state: paused;
            transform: rotateY(0deg) rotateX(0deg) scale(1.2);
            box-shadow: 0 4px 16px rgba(0,120,255,0.2);
            z-index: 100;
        }

        /* 媒体查询（手机端适配） */
        @media (max-width: 768px) {
            .tag-cloud {
                height: 400px;
            }
            .tag {
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="tag-cloud" id="tagCloud"></div>

    <script>
        // 模拟中国传媒大学官网热搜关键词
        const keywords = [
            "中国传媒", "大学生", "北京", "国际", "博物馆",
            "传播学", "新媒体", "艺术基金", "志愿者", "创新"
        ];

        // 生成标签云的函数
        function createTagCloud() {
            const container = document.getElementById('tagCloud');
            const containerWidth = container.clientWidth;
            const containerHeight = container.clientHeight;

            keywords.forEach((word, index) => {
                const tag = document.createElement('div');
                tag.className = 'tag';
                tag.textContent = word;

                // 生成随机位置（容器内均匀分布）
                const x = Math.random() * containerWidth - containerWidth/2;
                const y = Math.random() * containerHeight - containerHeight/2;
                const z = (Math.random() - 0.5) * 400; // 深度随机（-200到200）

                // 生成随机旋转角度（增加差异化）
                const rotateX = Math.random() * 60 - 30; // X轴旋转角度（-30°到30°）
                const rotateY = Math.random() * 360; // Y轴旋转角度（0°到360°）

                // 动态设置3D位置和旋转
                tag.style.transform = `
                    translate3d(${x}px, ${y}px, ${z}px)
                    rotateX(${rotateX}deg) rotateY(${rotateY}deg)
                `;

                // 随机动画延迟（避免同步旋转）
                tag.style.animationDelay = `${Math.random() * 2}s`;

                container.appendChild(tag);
            });
        }

        // 窗口Resize时重新布局标签
        window.addEventListener('load', createTagCloud);
        window.addEventListener('resize', createTagCloud);
    </script>
</body>
</html>